<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <textarea name="" id="" placeholder="请输入要吐槽的内容(最多吐槽120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComments">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.comment_id">
                <div class="cmt-title">
                    <img :src="item.avatar" alt="">
                    <div class="cmt-des"> 
                        <p class="number">第{{ i+1 }}楼:</p>
                        <p class="author">
                            <span>{{ item.author }}</span>
                            <span>{{ item.time | dateFormat }}</span>
                        </p>
                    </div>
                </div>
                <div class="cmt-body">
                    {{ item.content === 'undefined' ? '此用户很懒,嘛都没说' : item.content }}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    data() {
        return{
            author: '',
            time: '',
            comments: [], //所有的评论数据
            msg: '' //评论输入的内容
        }
    },
    created(){
        this.getInfoComments();
    },
    methods: {
        //获取评论
        getInfoComments() { //获取新闻详情
            this.$http
            .get('/api/story/' + this.id + '/short-comments')
            .then(result => {
                // if(result.body.code === 200){
                //     //console.log(result.body.result)
                //     this.newsInfo = result.body.result
                //     this.songList = result.body.result.songlist
                // }else{
                //     Toast('获取数据失败')
                // }
              // console.log(result.body.comments.length)
               this.comments = result.body.comments
            })
        },
        //加载更多
        getMore(){

        },
        postComments() {//发表评论
            //校验是否为空内容
            if( this.msg.trim().length === 0 ){  //trim() 去除空格
                return Toast("评论内容不能为空!");  // 为空了 后面的代码就不再执行了  直接 return 出来
            }
            //发表评论
            // 参数1: 请求的 URL 地址
            // 参数2: 提交给 服务器的数据对象 { content: this.msg }
            // 参数3: 定义提交时候, 表单中数据的格式 { emulateJSON: true }
            // this.$http
            // .post("",{
            //     content: this.msg.trim()
            // })
            // .then(function(res){
            //     if(res.body.status === 200){
            //         //拼接出 一个评论对象
            //         var cmt = { 
            //             author: '匿名用户',
            //             time: Date.now(),
            //             content: this.msg.trim()
            //         };
            //         this.comments.unshift( cmt );
            //         this.msg = '';
            //     }
            // })
            var cmt = { author: '匿名用户', time: Date.now(), content: this.msg.trim() };
            this.comments.unshift( cmt );
            this.msg = '';
        }
    },
    props: ["id"]
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 16px;
        padding: 15px 0;
        border-bottom: 1px solid #ddd;
    }
    textarea{
        font-size: 14px;
        height: 88px;
        margin-bottom: 0;
    }
    .cmt-list{
        .cmt-item{
            margin-top: 6px;
            .cmt-title{
                background-color: #ddd;
                font-size: 13px;
                overflow: hidden;
                padding: 10px 0;
                img{
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    overflow: hidden;
                    float:left;
                }
                .cmt-des{
                    float:left;
                    margin-left:20px;
                    .number{
                       color: #444;
                       margin-bottom: 0;
                    }
                    .author{
                        margin-bottom: 0;
                        span{
                            display: block;
                        }
                    }
                }
            }
            .cmt-body{
                line-height: 25px;
                text-indent: 2em;
                font-size: 15px;
                padding: 6px 0;
            }
        }
    }
}
</style>
